<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Datepicker from "./Datepicker.svelte";
    import { Row } from "../Row";
    import { Col } from "../Col";
    import { Button } from "../Button";
    import dayjs, { Dayjs } from "dayjs";
    import { Space } from "../Space";

    const { Story } = defineMeta({
        title: "Components/Form/Datepicker",
        component: Datepicker,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let value1 = $state<Dayjs[]>([]);
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker
                {...args}
                onchange={(v) => {
                    console.log(v);
                }}
                placeholder="请选择日期"
            />
        </div>
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Datepicker {...args} />
    {/snippet}
</Story>

<Story name="Size">
    {#snippet template(args)}
        <div style="height: 300px">
            <Space>
                <Datepicker value="2025-10-01" size="large" />
                <Datepicker value={dayjs("2025-10-01")} />
                <Datepicker value="" size="small" />
            </Space>
        </div>
    {/snippet}
</Story>

<Story name="Compact">
    {#snippet template(args)}
        <div style="height: 300px">
            <Space>
                <Datepicker value="2025-10-01" compact />
                <Datepicker value={dayjs("2025-10-01")} type="dateTimeRange" compact />
            </Space>
        </div>
    {/snippet}
</Story>

<Story name="Datetime">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="dateTime" />
        </div>
    {/snippet}
</Story>

<Story name="Week">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="week" value={dayjs("2026-01-01")} />
        </div>
    {/snippet}
</Story>

<Story name="Month">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="month" />
        </div>
    {/snippet}
</Story>

<Story name="Quarter">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="quarter" value={dayjs("2026-01-01")} />
        </div>
    {/snippet}
</Story>

<Story name="Year">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="year" value={dayjs("2026-01-01")} />
        </div>
    {/snippet}
</Story>

<Story name="DateRange">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker
                type="dateRange"
                onchange={(v) => {
                    console.log(v);
                }}
                format="YYYY年MM月DD日"
                placeholder="请选择日期范围"
            />
        </div>
    {/snippet}
</Story>

<Story name="DateTimeRange">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="dateTimeRange" format="YYYY年MM月DD日 HH时mm分ss秒" />
        </div>
    {/snippet}
</Story>

<Story name="WeekRange">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="weekRange" value={[dayjs("2025-11-01"), dayjs("2025-11-12")]} />
        </div>
    {/snippet}
</Story>

<Story name="MonthRange">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="monthRange" format="YYYY年MM月" />
        </div>
    {/snippet}
</Story>

<Story name="QuarterRange">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="quarterRange" value={[dayjs("2025-01-01"), dayjs("2025-07-01")]} clearable />
        </div>
    {/snippet}
</Story>

<Story name="YearRange">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker type="yearRange" clearable />
        </div>
    {/snippet}
</Story>

<Story name="Clearable" args={{ clearable: true }}>
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker {...args} />
        </div>
    {/snippet}
</Story>

<Story name="Format" args={{ format: "YYYY年MM月DD日", clearable: true }}>
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker {...args} />
            <Datepicker {...args} type="dateRange" />
        </div>
    {/snippet}
</Story>

<Story name="DisableDate">
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker
                {...args}
                disabledDate={(date: Date) => {
                    return date.getTime() > Date.now();
                }}
            />
        </div>
    {/snippet}
</Story>

<Story name="Align" args={{ align: "bottomRight" }}>
    {#snippet template(args)}
        <div style="height: 300px; text-align: center;">
            <Datepicker {...args} />
        </div>
    {/snippet}
</Story>

<Story name="RangeStick" args={{ stick: true }}>
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker {...args} type="dateRange" />
        </div>
    {/snippet}
</Story>

<Story name="Shortcut" args={{ stick: true }}>
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker {...args} type="dateRange" bind:value={value1}>
                {#snippet shortCuts()}
                    <Space dir="v">
                        <Button
                            theme="borderless"
                            onclick={() => {
                                const now = dayjs();
                                const start = dayjs().add(-6, "days");
                                value1 = [start, now];
                            }}>一周</Button
                        >
                        <Button
                            theme="borderless"
                            onclick={() => {
                                const now = dayjs();
                                const start = dayjs().add(-30, "days");
                                value1 = [start, now];
                            }}>一个月</Button
                        >
                    </Space>
                {/snippet}
            </Datepicker>
        </div>
    {/snippet}
</Story>

<Story name="MaxRange" args={{ stick: true, maxRange: 15 }}>
    {#snippet template(args)}
        <div style="height: 300px">
            <Datepicker
                {...args}
                type="dateRange"
                onchange={(v) => {
                    console.log(v);
                }}
            />
        </div>
    {/snippet}
</Story>
